<template>
  <div>
    <Row :gutter="10">
      <Col :md="24" :lg="8">
        <Row :gutter="10">
          <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
            <Card>
              <Row type="flex" class="user-infor">
                <Col span="8">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <!--<img class="avator-img" :src="avatorPath" />-->
                    <Avatar
                      style="background-color: #3F51B5;font-size: 60px;width: 80px;height:80px;line-height: 80px;border-radius: 80px;"
                      icon="person"/>
                  </Row>
                </Col>
                <Col span="16" style="padding-left:6px;">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <div>
                      <b class="card-user-infor-name">{{ userName }}</b>
                      <p>{{ roleNames }}</p>
                    </div>
                  </Row>
                </Col>
              </Row>
              <div class="line-gray"></div>
              <Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录时间:</p></Col>
                <Col span="16" class="padding-left-8">{{ lastLoginTime }}</Col>
              </Row>
              <!--<Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录地点:</p></Col>
                <Col span="16" class="padding-left-8">北京</Col>
              </Row>-->
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :md="24" :lg="16">
        <!--<Icon type="android-contacts"></Icon>-->
        <Row :gutter="5">
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="user_created_count"
              :end-val="count.createUser"
              iconType="ios-albums"
              color="#2d8cf0"
              intro-text="新闻总发布数"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="visit_count"
              :end-val="count.visit"
              iconType="eye"
              color="#64d572"
              :iconSize="50"
              intro-text="游客总浏览量"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="collection_count"
              :end-val="count.collection"
              iconType="navicon"
              color="#ffd572"
              intro-text="栏目总数"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="transfer_count"
              :end-val="count.transfer"
              iconType="android-contacts"
              color="#f25e43"
              intro-text="注册会员数"
            ></info-card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row>
      <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}"><a :href="this.swaggerUrl">接口文档</a></Col>
      <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}"><a :href="this.baseUrl">sql性能监控</a></Col>
      <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}"><a :href="this.adminUrl">当前项目的健康监控</a></Col>
      <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}"><a :href="this.url">在线生成字体样式网站</a></Col>
    </Row>
    <Row style="margin-top: 40px">
      <div style="width: 1200px;height: 600px;margin: 0 auto" id="bar_dv" ref="chart"></div>
    </Row>
  </div>
</template>

<script>
import countUp from './components/countUp.vue';
import infoCard from './components/infoCard.vue';
export default {
  name: 'home',
  components: {
    countUp,
    infoCard
  },
  data () {
    return {
      baseUrl: this.$http.adornUrl('/druid/index.html'),
      swaggerUrl: this.$http.adornUrl('/swagger-ui.html'),
      url: 'https://ww.baidu.com',
      /* 健康监控 */
      adminUrl: '',
      count: {
        createUser: 30000,
        visit: 10000,
        collection: 233430,
        transfer: 12120
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.getDataList();
      this.getAdminUrl();
    });
  },
  computed: {
    userName () {
      return this.$store.state.user.name;
    },
    roleNames () {
      return this.$store.state.user.roleNames;
    },
    lastLoginTime () {
      return this.$store.state.user.lastLoginTime;
    }
  },
  methods: {

    initCharts (values, dateList) {
      // 基本准备好的dom 初始化echrts实例
      var dom = this.$refs.chart;
      let myChart = this.$echarts.init(dom)
      console.log(myChart)
      let option = {
        title: {
          text: '文章统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['文章浏览量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '当天浏览总量',
            type: 'line',
            stack: '总量',
            data: values
          }
        ]
      };

      myChart.setOption(option);
    },
    // 获得当前健康监控的地址
    getAdminUrl () {
      this.$http({
        url: this.$http.adornUrl('/sys/config/getAdminHost'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          let config = JSON.parse(data.config);
          this.adminUrl = config.host;
        }
      })
    },
    // 获取数据列表
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/log/sheet/count'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          let list = data.list;
          let values = [];
          let dateList = [];
          for (let i = list.length - 1; i >= 0; i--) {
            values.push(list[i].allCount);
            dateList.push(list[i].createDate);
          }
          this.initCharts(values, dateList);
        }
      })
    }
  }
}
</script>

<style lang="less">
  @import './home';
  @import '../../assets/style/common';
</style>
